<template>
    <div class="page">
        <head-item :title="title"></head-item>
        <div class="item" v-for="(value,key,index) of movies" :key="index" >
            <div class="title">
                <span>{{value.title}}</span>
                <span class="more" @click="more(value.title,value.subTitle)">更多 > </span>
            </div>
            <div class="flex">
                <v-movie v-for="(item,index) of value.data" :key="index" :data="item" ></v-movie>
            </div>
        </div>
    </div>
</template>

<script>
import HeadItem from '@/components/Head.vue';
import Http from '@/api/douban.js'
import vMovie from './components/MovieItem.vue'
    export default {
        components:{
            HeadItem,
            vMovie
        },
        data(){
            return {
                title:'电影',
                movies:{}
            }
        },
        methods:{
            more(t,st){
                console.log(t+'-'+st);
                sessionStorage.setItem('title',t);
                this.$router.push(`/cinema/${st}`);
            }
        },
        async mounted() {
            if(localStorage.getItem("movies")){
                let movies = JSON.parse(localStorage.getItem('movies'));
                this.movies = movies;
            }else{
                var movies = {};
                var top250 = await Http.getTop250();
                var inTheaters = await Http.getTheaters();
                var comingSoon = await Http.getComing();
                movies.inTheaters = {};
                movies.inTheaters.title = "正在热映";
                movies.inTheaters.data = inTheaters.subjects.slice(0,3);
                movies.inTheaters.subTitle = "in_theaters";
        
                movies.comingSoon = {};
                movies.comingSoon.title = "即将上映";
                movies.comingSoon.data = comingSoon.subjects.slice(0,3);
                movies.comingSoon.subTitle = "coming_soon";
        
                movies.top250 = {};
                movies.top250.title = "豆瓣top250";
                movies.top250.data = top250.subjects.slice(0,3);
                movies.top250.subTitle = "top250";

                this.movies = movies;
                let str = JSON.stringify(movies);
                localStorage.setItem('movies',str);
            }
        },
    }
</script>

<style lang="less" scoped>
@top:46px;
@bottom:50px;
    .page{
        padding-top: @top;
        padding-bottom: @bottom;
    }
    .title{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
}
.more{
    color: #405f80;
    font-size: 14px;
}
.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}
</style>